<template>
	<view class="shop_detail"> 
		<!-- banner -->
		<u-swiper :list="db.images" circular height="520" mode="dot" img-mode='scaleToFill'></u-swiper>
		
		<view class="shopInfo">
			<view class="name">{{db.name}}</view>
			<view class="price">￥{{db.price}}</view>
		</view>
		
		<view class="shopNumber w95">
			<view>运费:包邮</view>
			<view>销量:{{db.sales}}件</view>
			<view>库存:{{db.inventory}}件</view>
		</view>
		
		<view class="nav">
			<text v-for="(item,index) in nav" :key="index"
				:class="navActive == index?'active':''"
				@click="navActive = index"
			>{{item}}</text>
		</view>
		<!-- 返回顶部 -->
		<u-back-top :scroll-top="scrollTop"></u-back-top>
		
		<view class="richText" v-if="navActive == 0">
			<view v-html="db.content"></view>
			<view class="submit" @click="$refs.popup.open()">立即购买</view>
		</view>
		
		<hComment v-if="navActive == 1" :list="db.appraise"></hComment>
			
		<uni-popup ref="popup" type="bottom">
			<view class="model">
				<view class="shopinfo">
					<image class="thumb" :src="db.image" mode="aspectFill"></image>
					<view>
						<view class="name">{{db.name}}</view>
						<view class="price">￥{{db.price}}</view>
					</view>
				</view>
				<view class="specs">
					<view class="tit">规格</view>
					<view class="cont">
						<text v-for="(item,index) in db.goodsjson" :key="index"
							:class="index == active?'active':''"
							@click="active = index;shopNum = 1"
						>
							{{item.format}}(库存{{item.inventory}})
						</text>
					</view>
				</view>
				<view class="choosenum">
					<view class="tit">数量</view>
					<view class="cont">
						<text class="btn" @click="C_calc('-')">-</text>
						<text class="num">{{shopNum}}</text>
						<text class="btn" @click="C_calc('+')">+</text>
					</view>
				</view>
				<view class="submit" @click="comfirmOrder">确定</view>
				
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import hComment from './h-common.vue' 
	export default {
		components:{hComment},
		data() {
			return {
				scrollTop:0,
				nav:['详情','评价'],
				navActive:0,
				
				db:{},
				shopNum:1,
				active:0
			};
		},
		
		onLoad(o) {
			this.def_db(o.id)
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods:{
			def_db(goods_id){
				this.$u.post('/shop/goodinfo',{goods_id}).then(res=>{
					this.db = res.data
				})
			},
			C_calc(status){
				if(status == '-'){
					this.shopNum>1?this.shopNum--:1
				}
				if(status == '+'){
					if(this.shopNum < this.db.goodsjson[this.active].inventory){
						this.shopNum++
					}else{
						this.$u.toast('库存不足')
						this.shopNum = this.db.goodsjson[this.active].inventory
					}
				}
			},
			comfirmOrder(){
				let obj = {
					db:this.db,
					shopNum:this.shopNum,
					active:this.active
				}
				uni.navigateTo({
					url:'../confirmOrder/confirmOrder?obj='+encodeURIComponent(JSON.stringify(obj))
				})
				this.$refs.popup.close()
			}
			
		}
	}
</script>

<style lang="scss">
	page{background-color: #FFFFFF;}
	.shop_detail{
		.w95{
			width: 95%;
			margin: auto;
		}
		.shopInfo{
			padding: 20rpx 30rpx 15rpx;
			font-size: 35rpx;
			border-bottom: 1px solid rgba(0,0,0,.05);
			.price{
				color: $h-price;
				font-weight: bold;
				margin-top: 20rpx;
			}
		}
		.shopNumber{
			display: flex;
			justify-content: space-between;
			font-size: 24rpx;
			padding: 25rpx 0;
			color: #818181;
			border-bottom: 1px solid rgba(0,0,0,.05);
		}
		
		.nav{
			width: 70%;
			margin: auto;
			display: flex;
			justify-content: space-between;
			color: #A8A8A8;
			font-weight: bold;
			text{
				width: 50%;
				text-align: center;
				padding: 20rpx;
				&.active{
					position: relative;
					color: #333333;
					&::before{
						content: '';
						display: block;
						width: 40rpx;
						height: 8rpx;
						background-color: #000000;
						position: absolute;
						bottom: 0;
						left: calc(50% - 20rpx);
						border-radius: 20rpx;
					}
				}
			}
		}
		
		.submit{
			padding: 20rpx;
			text-align: center;
		}
	
		.model{
			background-color: #FFFFFF;
			border-top-left-radius: 20rpx;
			border-top-right-radius: 20rpx;
			font-weight: bold;
			overflow: hidden;
			>view{
				padding: 30rpx;
			}
			.shopinfo{
				display: flex;
				.thumb{
					width: 150rpx;
					height: 150rpx;
					border-radius: 20rpx;
					margin-right: 30rpx;
				}
				>view{
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					font-size: 35rpx;
					.price{
						color: $h-price;
					}
				}
			}
			.specs{
				border-top: 1px solid rgba(0,0,0,.25);
				border-bottom: 1px solid rgba(0,0,0,.25);
				.tit{
					padding-bottom: 20rpx;
				}
				.cont{
					display: flex;
					flex-wrap: wrap;
					grid-gap: 20rpx;
					text{
						text-align: center;
						border-radius: 10rpx;
						display: inline-block;
						padding: 10rpx 30rpx;
						background-color: #F6F6F6;
						color: #333333;
						white-space: nowrap;
						&.active{
							background-color: rgba(240,32,81,0.1);
							color: #F02051;
						}
					}
				}
			}
			.choosenum{
				display: flex;
				align-items: center;
				border-bottom: 1px solid rgba(0,0,0,.25);
				.cont{
					display: flex;
					align-items: center;
					margin-left: 80rpx;
					text{
						$wh:60rpx;
						display: inline-block;
						text-align: center;
						font-weight: 100;
						&.btn{
							border-radius: 50%;
							border: 1px solid #333333;
							width: $wh;
							height: $wh;
							font-size: 52rpx;
							line-height: 50rpx;
						}
						&.num{
							line-height:$wh ;
							min-width: $wh;
							height: $wh;
							font-size: 40rpx;
							padding: 0 30rpx;
							
						}
					}
				}
			}
			
			.submit{
				margin: 20rpx auto;
				
			}
		}
	}
</style>
